<template>
    <input class="myInput" :type="type || 'text'" :placeholder="placeholder" :value="modelValue" @input="getData"/>
</template>

<script>
import { reactive,toRefs} from 'vue'
export default {
    props:['modelValue','placeholder','type'],
    setup(props,context) {
        const state = reactive({
            
        })

        const getData = e=>{
            context.emit('update:modelValue', e.target.value)
        }


        return {
            ...toRefs(state),
            getData
        }
    },
}
</script>
<style lang="scss" scoped>
    .myInput{
        width: 100%;
        height: 70px;
        border: 2px solid #fff;
        outline: none;
        padding: 0 15px;
        font-size: 28px;
        line-height: 66px;
        border-radius:10px ;
        background: none;
        color: #fff;
    }
</style>